{% extends "manage/stats_base.html" %}

{% set page_title = '上课记录' %}

{% block css %}
 <style type="text/css">
    .vis-item.red {
      background-color: red;
      border-color: darkred;
      color: white;
      font-family: monospace;
      font-size: 12px;
    }

    .vis-item.green {
      background-color: green;
      border-color: darkred;
      color: white;
      font-family: monospace;
      font-size: 12px;
    }

    .vis-item.vis-box.red {
      border-radius: 0;
      border-width: 2px;
    }

    #visualization {
      background-color: gray;
    }
</style>
{% endblock %}

{% block content %}
<h4><a href="{{ url_for('manage.edit_school', sid=school.id) }}">{{ school.name }}</a><small>（仅显示最近200次课程数据）</small></h4>
  <div class="row">
    <div class="col-md-10 col-md-offset-1" id="visualization">点击上课时间来显示时间轴</div>
  </div>
  <div class="row">
    <div class="col-md-offset-1"><input id="check" type="checkbox" checked="checked" value="value">是否显示学生数据？</div>
  </div>

<div class="row">
<div class="m-content">
	<table data-toggle="table" class="table table-striped table-condensed table-bordered">
		<thead>
			<tr>
				<th>上课时间</th>
				<th>班级</th>
				<th>教室</th>
			</tr>
		</thead>
		<tbody>
			{% for session in sessions %}
			<tr id="{{ session.id }}">
				<td>
					<a class="btn" href="#">{{ session.start_at }}</a>
					({{ session.session_activities.count() }})
				</td>
				<td>{{ session.music_class.name }}</td>
				<td>{{ session.classroom.name }}</td>
			</tr>
			{% endfor %}
		</tbody>
	</table>
</div>
</div>
{% endblock %}

{% block js%}

<script type="text/javascript">

var SessionId = 0; // global var for store the session id when click session time.

function showTimeline(session_id){
  // DOM element where the Timeline will be attached
  var container = document.getElementById('visualization');

  // Configuration for the Timeline
  var options = {
    moveable: false,
    format: {
      majorLabels: {
      millisecond:'HH:mm:ss',
        second:     'MM/D HH:mm',
        minute:     'MM/D',
        hour:       'MM/D',
        weekday:    'MM YYYY',
        day:        'MM YYYY',
        month:      'YYYY',
        year:       ''
      }
    }
  };

  var url = "/manage/statistics/session_activities/" + session_id;
  $.get(url, function(data){

    var startObj = data['start_activity'];
  	var result = [{content: '上课开始', start: startObj.created_at}];
    var studentLen = data['student_activity'].length;
    var objs = data['student_activity'].concat(data['teacher_activity']);
    var studentOn = $('#check').prop('checked');

  	for (var i=0; i<objs.length; i++) {
  		var obj = objs[i];
  		var content = '';
      var style = '';
      if (!studentOn && i < studentLen){
        continue;
      } else if (studentOn && i < studentLen){
        style = 'green';
        content = "<p>歌曲:"+ obj.lesson_id +"</p><p>步骤:"+ obj.step_id +"</p><p>姓名:"
                  + obj.name + "</p><p>分数：" + obj.score + "</p>";
      } else {
        style = 'red';
        content = "<div>歌曲:"+ obj.lesson_id +"</div><div>步骤:"+ obj.step_id +"</div><div>动作:" + obj.type + "</div>";
      }
  		result.push({id: obj.id, content: content, start: obj.created_at, className: style});
  	}

  	var items = new vis.DataSet(result);
  	$(container).html('');
  	// Create a Timeline
  	var timeline = new vis.Timeline(container, items, options);
  }, 'json');
}

function checkInputClick(){
  var checked = $('#check').prop('checked');
  if (SessionId){
    showTimeline(SessionId);
  }
}

$(function(){
	$('table tbody td a').bind('click', function(){
		SessionId = $(this).parent().parent().attr('id');
		showTimeline(SessionId);
	});

  $('#check').bind('click', checkInputClick);
});
</script>
{% endblock %}
